@import '~@/libs/style/app/variables.scss';
@import '~@/libs/style/app/mixin.scss';

.theme--black-and-white {
  /*app*/
  /*header相关*/
  $--app-header-height: 52px;
  $--app-header-background-color: #fff;
  $--app-header-font-color: #333; /*header 头部字体颜色*/
  $--app-header-border-color: #dcdcdc;

  /*nav bar*/
  $--app-nav-tag-border: #e8eaec; /*nav边框*/
  $--app-nav-height: 40px; // 导航栏高度
  $--app-nav-background-color: $--body-background-color; // 导航栏高度

  /*menu*/
  $--app-menu-width: 220px; /*菜单宽度*/
  $--app-menu-width-is-collapse: 65px;
  $--app-menu-height: 48px; /*菜单*/
  $--app-menu-background-color: #191a23; // 一级菜单背景颜色
  $--app-menu-font-color: #fff; // 字体颜色

  $--app-menu-item-height: 48px; /*菜单默认高度*/

  $--app-sub-menu-background-color: #020202; // 二级/三级菜单背景颜色
  $--app-sub-menu-height: $--app-menu-height; // 二级菜单高度
  $--app-sub-menu-font-color: hsla(0, 0%, 100%, 0.7); // 二级菜单字体颜色
  $--app-sub-menu-font-color--hover: #fff; // 二级菜单鼠标悬浮字体颜色

  @mixin el-menu--vertical() {
    .el-menu {
      width: $--app-menu-width;
      color: $--app-sub-menu-font-color;
      background: $--app-menu-background-color;
      border-right-width: 0;
      i,
      .el-menu-item,
      .el-submenu__title,
      .el-submenu,
      .el-submenu__icon-arrow,
      .el-icon-arrow-down {
        color: $--app-sub-menu-font-color;
      }
      .el-menu-item,
      .el-submenu__title,
      .el-submenu {
        background: $--app-menu-background-color;
      }

      .el-submenu__title,
      .el-menu-item {
        height: $--app-menu-height;
        line-height: $--app-menu-height;
        position: relative;
      }

      /*父菜单*/
      .el-submenu {
        .el-submenu__icon-arrow,
        .el-icon-arrow-down {
          font-weight: bold;
        }

        .el-menu {
          background: $--app-sub-menu-background-color;
          .el-menu-item {
            background: $--app-sub-menu-background-color;
          }
        }

        /*二级/三级菜单背景颜色*/
        .el-submenu__title {
          transition: all 0.3s;
          position: relative;
          &:hover {
            border-left: 7px solid $--color-primary;
          }
        }
        /*激活*/
        &.is-active {
          .el-submenu__title {
            color: $--app-sub-menu-font-color;
            i {
              color: $--app-sub-menu-font-color;
            }
          }
        }
      }

      /*子菜单*/
      .el-menu-item {
        // 自己修改element ui样式
        &.is-active,
        &:hover {
          color: #fff;
          background: $--color-primary !important;
          i {
            // 图标
            color: #fff;
            font-weight: bold;
          }
        }
        &.single-item {
          &:hover {
            color: #fff;
            i {
              color: #fff;
            }
          }
          &.is-active {
            color: #fff;
            i {
              color: #fff;
            }
          }
        }
      }
    }
    .el-menu--collapse {
      .el-submenu.is-active {
        & > .el-submenu__title {
          i {
            // 图标
            color: $--color-primary;
            font-weight: bold;
          }
        }
      }
    }
  }

  @mixin el-menu--popup(
    $--app-menu-background-color: $--app-menu-background-color,
    $--app-menu-font-color: $--app-menu-font-color,
    $--color-primary: $--color-primary,
    $--app-menu-height: $--app-menu-height
  ) {
    background: $--app-menu-background-color;
    i,
    .el-menu-item,
    .el-submenu__title,
    .el-submenu,
    .el-submenu__icon-arrow,
    .el-icon-arrow-down {
      color: $--app-menu-font-color;
    }

    .el-menu-item,
    .el-submenu__title,
    .el-submenu {
      background: $--app-menu-background-color;
    }

    .el-submenu__title,
    .el-menu-item {
      height: $--app-menu-height;
      line-height: $--app-menu-height;
      position: relative;
    }

    /*父菜单*/
    .el-submenu {
      .el-submenu__icon-arrow,
      .el-icon-arrow-down {
        font-weight: bold;
      }

      /*二级/三级菜单背景颜色*/
      .el-submenu__title {
        transition: all 0.3s;
        position: relative;
        &:hover {
          color: #fff;
          background: $--color-primary;
          i {
            color: #fff;
          }
        }
      }
      /*激活*/
      &.is-active {
        .el-submenu__title {
          color: $--color-primary;
          font-weight: bold;
          i {
            color: $--color-primary;
          }
        }
        &:hover {
          .el-submenu__title {
            color: #fff;
            i {
              color: #fff;
            }
          }
        }
      }
    }

    /*子菜单*/
    .el-menu-item {
      // 自己修改element ui样式
      &.is-active,
      &:hover {
        color: #fff;
        background: $--color-primary;
        i {
          // 图标
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }

  @mixin el-menu-horizontal() {
    .el-menu {
      height: $--app-header-height;
      box-sizing: border-box;
      background: transparent;
      .g-new-badge {
        position: absolute;
        right: 6px;
        top: 0;
        z-index: 10;
      }
      .el-menu-item,
      .el-submenu__title {
        color: $--app-header-font-color;
        height: $--app-header-height;
        line-height: $--app-header-height;
        @include flex-vertical-center($--app-header-height);
        &:hover {
          background: transparent;
        }
      }

      i,
      .el-submenu__icon-arrow,
      .el-icon-arrow-down {
        color: $--app-header-font-color;
        margin-left: 10px;
      }

      .el-submenu {
        .el-submenu__icon-arrow,
        .el-icon-arrow-down {
          margin-top: 0;
          font-weight: bold;
        }

        /*二级/三级菜单背景颜色*/
        .el-submenu__title {
          padding: 0 20px 0 10px;
          transition: all 0.3s;
          position: relative;
          &:before {
            content: '';
            position: absolute;
            background: $--color-primary;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 5px;
            transform: scaleX(0);
            opacity: 0;
            transition: transform 0.2s;
          }
        }
        &.is-active {
          .el-submenu__title {
            border-bottom: 0;
            &:before {
              content: '';
              transform: scaleX(1);
              opacity: 1;
            }
          }
        }
      }

      .el-menu-item {
        border-bottom: none;
        padding: 0 20px 0 10px;
        &:before {
          content: '';
          position: absolute;
          background: $--color-primary;
          width: 100%;
          bottom: 0;
          left: 0;
          height: 5px;
          transform: scaleX(0);
          opacity: 0;
          transition: transform 0.2s;
        }
        &.is-active {
          i {
            color: $--color-primary;
          }
          background: transparent;
          border-bottom-width: 0;
          &:hover {
            background: transparent;
          }
          &:before {
            content: '';
            transform: scaleX(1);
            opacity: 1;
          }
        }
        &.single-item.is-active {
          i {
            color: $--app-header-font-color;
          }
        }
      }
    }
  }

  @mixin g-app__menu-logo() {
    .g-app__menu-logo {
      @include flex-center();
      height: $--app-header-height;
      color: $--app-menu-font-color;
      width: $--app-menu-width;
      white-space: nowrap;
      font-size: 16px;
      box-sizing: border-box;
      .g-logo-title {
        font-size: 20px;
        line-height: 55px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        margin-left: 10px;
        font-family: cursive;
      }
    }
  }

  @mixin g-app__menu-child() {
    overflow: hidden auto;
    height: 100vh;
    width: calc(#{$--app-menu-width} + 17px);
    .empty__wrap {
      .empty__description {
        color: #fff;
      }
    }
  }

  @mixin g-app__header() {
    width: 100%;
    background: $--app-header-background-color; // 1e1e1e
    color: $--app-header-font-color;
    border-bottom: 1px solid $--app-header-border-color;
    @include flex-vertical-center($--app-header-height);
    padding: 0 20px;
    line-height: $--app-header-height;
    box-sizing: border-box;
    position: relative;
    justify-content: space-between;
  }

  @mixin g-app__header-left() {
    display: flex;
    flex-shrink: 0;
    @include flex-vertical-center($--app-header-height);
    .g-el-icon-s {
      font-size: 18px;
      cursor: pointer;
      color: lighten($--app-header-font-color, 30%);
      margin-right: 10px;
    }
    .el-breadcrumb {
      @include flex-vertical-center($--app-header-height);
      padding: 0 30px;
      font-weight: 700;
      font-size: 14px;
      min-width: 80px;
      .el-breadcrumb__separator {
        font-size: 14px;
        color: #dcdee2;
      }
      .el-breadcrumb__item {
        @include flex-vertical-center($--app-header-height);
        .el-breadcrumb__inner {
          i {
            vertical-align: middle;
          }
          span {
            padding-left: 6px;
            vertical-align: middle;
          }
        }
        &:not(:nth-last-of-type(1)) {
          span {
            font-weight: normal;
            color: #999;
          }
        }
        &:nth-last-of-type(1) {
          span {
            font-weight: bold;
          }
        }
      }
    }
    .g-logo__wrap {
      @include flex-center();
      white-space: nowrap;
      font-size: 16px;
      margin-left: 8px;
      padding-right: 20px;
      height: $--app-header-height;
      color: $--app-header-font-color;
      width: fit-content;
      box-sizing: border-box;

      .g-logo-title {
        font-size: 20px;
        line-height: 55px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        margin-left: 10px;
        font-family: cursive;
      }
    }
  }

  @mixin g-app__header-right() {
    display: flex;
    .g-icon-refresh__wrap {
      @include flex-vertical-center($--app-header-height);
      .el-icon-refresh {
        font-size: 18px;
        padding: 0 20px;
        cursor: pointer;
        vertical-align: middle;
        @include flex-vertical-center($--app-header-height);
      }
      .icon-refreshing {
        animation: spin 600ms infinite linear;
        animation-play-state: running;
      }
    }
    .g-full-screen-wrap {
      .el-icon-full-screen {
        font-size: 18px;
        cursor: pointer;
        color: $--app-header-font-color;
        @include flex-vertical-center($--app-header-height);
      }
    }
    .g-version__wrap {
      padding: 0 0 0 10px;

      span {
        font-size: 12px;
        font-style: italic;
        white-space: nowrap;
      }

      &:before {
        position: relative;
        top: 2px;
      }
    }
    .g-avatar__wrap {
      color: $--app-header-font-color;
      height: 100%;
      @include flex-vertical-center($--app-header-height);
      font-size: 14px;
      margin-left: 12px;
      span:first-child {
        cursor: pointer;
        @include flex-vertical-center($--app-header-height);
        .g-avatar {
          font-size: 28px;
          color: $--app-header-font-color;
          margin: 0 10px 0 0;
          vertical-align: middle;
        }
      }
    }
    .g-el-icon-setting {
      font-size: 18px;
      color: $--app-header-font-color;
      @include flex-vertical-center($--app-header-height);
      padding: 0 10px;
      cursor: pointer;
    }
  }

  @mixin g-app__menu-is-collapse() {
    width: $--app-menu-width-is-collapse;
    .g-app__menu-logo,
    .g-app__menu-child,
    .el-menu {
      width: $--app-menu-width-is-collapse !important;
    }
  }

  /*水平布局*/
  &.layout--horizontal {
    .g-app__body {
      /*左边菜单*/
      .g-app__menu {
        overflow: hidden;
        height: 100vh;
        background: $--app-menu-background-color;

        &.g-app__menu-parent {
          width: $--app-menu-width;

          .g-app__menu-child {
            @include g-app__menu-child();
            @include g-app__menu-logo();
            @include el-menu--vertical();
          }
        }

        &.g-app__menu-is-collapse {
          @include g-app__menu-is-collapse();
        }
      }

      .g-app__body-right {
        box-shadow: 6px 0 8px 0 rgb(0, 0, 0, 0.9);
        //border-left: 1px solid $--app-header-border-color;
        .g-app__header {
          @include g-app__header();
          .g-app__header-left {
            @include g-app__header-left();
          }
          .g-app__header-right {
            @include g-app__header-right();
          }
        }
      }
    }
    /*menu 弹出框*/
    .el-menu--vertical {
      margin-top: -10px;
      .el-menu--popup {
        @include el-menu--popup();
      }
    }
  }

  /*垂直布局*/
  &.layout--vertical {
    .g-app__body {
      display: flex;
      flex-direction: column;
      .g-app__header {
        @include g-app__header();
        .g-app__header-left {
          @include g-app__header-left();
        }
        .g-app__header-center {
          flex: 1;
          background: transparent;
          @include flex-vertical-center($--app-header-height);
          .g-menu-horizontal {
            @include el-menu-horizontal();
            .el-menu {
              border-bottom: none;
            }
          }
        }
        .g-app__header-right {
          @include g-app__header-right();
        }
      }
    }

    /*menu 弹出框*/
    & > .el-menu--horizontal {
      @include el-menu--popup($--app-header-background-color, $--app-header-font-color);
      .g-menu-title-label {
        padding-left: 20px;
      }
    }
  }

  /*水平 +垂直 布局*/
  &.layout--horizontal-vertical {
    .g-app__body-left {
      &.g-app__menu {
        overflow: hidden;
        height: 100vh;
        background: $--app-menu-background-color;

        &.g-app__menu-parent {
          width: $--app-menu-width;

          .g-app__menu-child {
            @include g-app__menu-child();
            @include g-app__menu-logo();
            @include el-menu--vertical();
          }
        }

        &.g-app__menu-is-collapse {
          @include g-app__menu-is-collapse();
        }
      }
    }

    .g-app__header-center {
      flex: 1;
      background: transparent;
      @include flex-vertical-center($--app-header-height);
      .g-menu-horizontal {
        @include el-menu-horizontal();
      }
    }

    .g-app__body-right {
      box-shadow: 6px 0 8px 0 rgb(0, 0, 0, 0.9);
      //border-left: 1px solid $--app-header-border-color;

      .g-app__header {
        @include g-app__header();
        .g-app__header-left {
          @include g-app__header-left();
        }

        .g-app__header-center {
          flex: 1;
          background: transparent;
          @include flex-vertical-center($--app-header-height);
          .g-menu-horizontal {
            @include el-menu-horizontal();
          }
        }

        .g-app__header-right {
          @include g-app__header-right();
        }
      }
    }

    & > .el-menu--vertical {
      margin-top: 10px;
      .el-menu--popup {
        @include el-menu--popup();
      }
    }
  }

  .g-app__nav {
    &.g-nav-tag {
      background: $--app-nav-background-color;
      height: $--app-nav-height;
      .contextmenu {
        border: 1px solid $--app-nav-tag-border;
        .g-nav-contextmenu-divide {
          background: $--app-nav-tag-border;
        }
      }
    }
  }
}
